<template>
	<view class="ht">


		<view class="title">
			<view>
				<view class="myjf" @click="tanchuan">我的积分</view>
				<view class="jifen">
					{{jifen}}

				</view>
			</view>
			<view class="duihuan" @click="tiaozhuan">
				兑换
			</view>
		</view>
		<view class="biaoge">
			<view class="mx">
				积分明细
			</view>
			<view class="content" v-for="(item,index) in shuju" :key='index'>
				<view class="conleft">
					<view>{{item.name}}</view><br>
					<view style="font-size: 26rpx;margin-top: 10rpx;">{{item.date}}</view>
				</view>
				<view class="conright">
					<view style="color: red;">{{item.jifen}}</view>

				</view>

			</view>




		</view>
		<view v-if="show" class="tanchaung" @click="tanchuan">
			<view class="biaoti">
				积分规则
			</view>
			<view class="neirong">
				<p>
					可以在积分任务中获取积分。积分任务是为本平台会员提供获取积分奖励的功能板块，会员可通过此板块完成相应任务获得对应积分奖励，积分可用于本平台内商品兑换以乃其他会品活动。
				</p>
			</view>
			<view class="biaoti">
				积分使用
			</view>
			<view class="neirong">

				<p>积分可累计，可在平台内兑换各类权益;积分具有有效期、使用范围和不可转赠的基本属性。
					本积分不作为任何形式的货币，不作用于本平台以外的任何其他服务。
				</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				jifen: 56170,
				shuju: [{
					name: "积分兑换",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, {
					name: "参加答题获取",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, {
					name: "每日答题",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, {
					name: "积分兑换",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, {
					name: "积分兑换",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, {
					name: "积分兑换",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, {
					name: "积分兑换",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, {
					name: "积分兑换",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, {
					name: "积分兑换",
					date: "2012-12-19 8：00：00",
					jifen: "-2000"
				}, ]

			}
		},
		methods: {
			tanchuan() {
				this.show = !this.show
				console.log(this.show);
			},
			tiaozhuan() {
				uni.navigateTo({
					url: 'pages/myArddress/myArddress',

				})
			}

		}
	}
</script>

<style lang="less" scoped="scoped">
	.tanchaung {

		width: 660rpx;
		height: 800rpx;
		background-color: white;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-sizing: border-box;
		box-shadow: rgb(127, 127, 127) 0 0 2px 0;

		.biaoti {
			text-align: center;
			color: red;
			padding: 10rpx;

		}

		.neirong {
			font-size: 28rpx;
			margin-top: 10rpx;
			padding: 10rpx;
			color: rgb(127, 127, 127);

		}
	}

	.title {
		color: white;
		background-color: rgb(248, 130, 89);
		height: 200rpx;
		padding-left: 20rpx;
		position: relative;
		border-radius: 0 0 25px 25px;

		.jifen {
			margin-top: 10rpx;
			color: white;
			font-size: 54rpx;
			font-weight: bolder;

		}

		.duihuan {
			background-color: white;
			height: 64rpx;
			width: 146rpx;
			border-radius: 5px;
			position: absolute;
			left: 620rpx;
			top: 50rpx;
			color: black;
			text-align: center;
			line-height: 64rpx;
			font-size: 28rpx;
		}



	}

	.biaoge {
		width: 710rpx;
		position: relative;
		bottom: 70rpx;
		border-radius: 5px;
		box-shadow: rgb(127, 127, 127) 0px 0px 3px 2px;
		margin: 0 auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: white;

		.mx {
			height: 134rpx;
			line-height: 134rpx;
		}

		.content {
			box-sizing: border-box;
			border-bottom: 1px solid rgb(127, 127, 127);
			color: rgb(127, 127, 127);
			height: 134rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.conleft {}



		}
	}
</style>
